<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="font/iconfont.css">
  </head>
  <style media="screen">
    .type-radio{
      visibility: hidden;;
    }
    .star{
      background: url('star2.png') no-repeat;
      cursor: pointer;
    }
    .rateClassOn{
      background: url('star.png') no-repeat!important;
    }
    .rateClassOff{
      background: url('star2.png') no-repeat!important;
    }
  .spanOne{
    color: red;
  }
  .spanOne1{
    color: #e4393c;
  }
  </style>
  <body>
  <div class="box">
      <label for="val1" class="star"   @mouseover="toggleShow(1)" @click = setrate(1)    :class="[nowIndex > 0? rateClassOn:rateClassOff]">
        <input type="radio" name="key" value="1" class="type-radio"  id="val1">
      </label>
      <label for="val2" class="star" @click = setrate(2) @mouseover="toggleShow(2)"   :class="[nowIndex > 1? rateClassOn:rateClassOff]">
        <input type="radio" name="key" value="2" class="type-radio" id="val2">
      </label>
      <label for="val3" class="star" @click = setrate(3) @mouseover="toggleShow(3)"   :class="[nowIndex > 2? rateClassOn:rateClassOff]">
        <input type="radio" name="key" value="3" class="type-radio" id="val3">
      </label>
      <label for="val4" class="star" @click = setrate(4) @mouseover="toggleShow(4)"   :class="[nowIndex > 3? rateClassOn:rateClassOff]">
        <input type="radio" name="key" value="4" class="type-radio" id="val4">
      </label>
    </label>
    <span v-show = "nowIndex === 1" class="spanOne">1</span>
    <span v-show = "nowIndex === 2" class="spanOne1"><i class="iconfont icon-biaoqingkulian"></i></span>
    <span v-show = "nowIndex === 3">3</span>
    <span v-show = "nowIndex === 4">4</span>
  </div>
  </body>
  <!-- <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> -->
  <script src="//cdn.bootcss.com/vue/2.2.6/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      data:{
        nowIndex:0,
        rateClassOff:'rateClassOff',
        rateClassOn:'rateClassOn'
      },
      methods:{
        toggleShow:function(index){
          if(this.nowIndex == index){return}
           this.nowIndex = index
           console.log(this.nowIndex)
        },
      },
    }).$mount('.box')
  </script>
</html>
